<template>
  <div class="peopleShow_wrap">
    <div class="lottery-title">
      <div class="title-left">
        {{ peopleTitle }}
      </div>
    </div>
    <div class="peopleShow">
      <div class="swiper-container1">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(swiper, index) in myswiperOption"
            :key="index"
          >
            <div class="pop_up_swiper-slide_all">
              <div
                class="right-luckeravatar"
                v-for="(user, key) in swiper"
                :class="swiper.length == 1 ? 'right-one' : ''"
                :key="key"
              >
                <img :src="user.avatar" :onerror="musicPlay.defaultImg" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-reward-foot">
        <div class="start-btn" @click="startBtn"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "peopleShow",
  props: {
    myswiperOption: {
      type: Array,
      default: [],
    },
    peopleTitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      musicPlay: {
        defaultImg:
          'this.src="' +
          require("@/assets/images/activity/default_head.png") +
          '"',
      },
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.SwiperDiv();
    });
  },
  methods: {
    SwiperDiv() {
      let delayAutoPlay = this.myswiperOption.length > 5 ? 3000 : 0;
      new Swiper(".swiper-container1", {
        direction: "horizontal", // 垂直切换选项
        observer: true,
        observeParents: true,
        loop: true, // 循环模式选项
        autoplay: delayAutoPlay,
        autoplayDisableOnInteraction: false,
      });
    },
    startBtn() {
      this.$emit("SonStartLotteryBtn", 1);
    },
  },
};
</script>

<style lang='less' scoped>
.peopleShow_wrap {
  margin-left: 50px;
  height: 74%;
  width: 85%;
  margin-right: 8%;
}
.peopleShow {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/images/activity/rightbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 16px;
  box-shadow: 7px 10px 40px #121212;

  .swiper-container1 {
    overflow: hidden;

    /* 人数显示弹框控制 */
    .swiper-slide {
      display: flex;
      justify-content: center;

      /* margin:  0 auto 0 auto; */
      .pop_up_swiper-slide_all {
        margin-left: 4.5% !important;
        margin-top: 7px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .right-luckeravatar {
          width: 4.65%;
          margin: 10px;
          position: relative;

          &::after {
            top: -1px;
            /*no*/
            right: -1px;
            /*no*/
            bottom: 0px;
            /*no*/
            left: -1px;
            /*no*/
            content: "";
            display: block;
            position: absolute;
            border-top-right-radius: 50px;
            border-radius: 50%;
            background-image: linear-gradient(
              146deg,
              rgba(226, 247, 176, 0.5),
              rgba(236, 165, 48, 0.5)
            );
            z-index: -1;
          }

          img {
            width: 100%;
            border-radius: 50%;
          }
        }

        .right-one {
          width: 10%;

          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100px;
            height: 100px;
            left: -5px /*no*/;
            top: -5px /*no*/;
            border-radius: 50%;
            background-image: linear-gradient(
              146deg,
              rgba(226, 247, 176, 0.5),
              rgba(236, 165, 48, 0.5)
            );
            z-index: -1;
          }
          img {
            width: 90px;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .right-reward-foot {
    position: absolute;
    left: 40%;
    bottom: 3%;

    .start-btn {
      width: 220px;
      height: 68px;
      cursor: pointer;
      margin: 0 auto;
      background-image: url("../../../assets/images/activity/start-btn.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
.lottery-title {
  color: #fff;
  font-size: 20px;
  text-align: center;
  height: 12%;
  line-height: 12%;
  padding: 2% 0 2% 0;
  .title-left {
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 48px;
  }
}
</style>
